<!--
- Author:  LiShibin.
- Date:    2017/7/17 0017.
- File:    list.
-->
<template>
  <div class="Web_Box">
    <div class="newlist"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <ul>
        <li class=" f-cb" @click="gotoNewsDetail(item.id)" v-for="item in newsList.data">
          <div class="mewimg">
            <img style="width: 100%" :src="item.head_img" @error="test" alt="">
          </div>
          <div style="padding-left: 3.25rem">
            <p class="text3">{{item.title}}</p>
            <p class="time">{{item.add_time | timestampToDate('yyyy-MM-dd hh:mm')}}</p></div>
        </li>
      </ul>
      <loading-more :allLoaded="newsList.allLoaded" :show="newsList.data.length > 0"></loading-more>
      <empty-data :show="newsList.allLoaded && newsList.data.length <= 0"></empty-data>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        defaultImg: require('../../assets/images/logo-img.png'),
        newsList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getNewsList(this.newsList.page, this.newsList.pageSize)
    },
    methods: {
      test(e) {
        e.target.src = this.defaultImg
      },
      gotoNewsDetail(id) {
        window.location = '../article.html?id=' + id + '&memberId=' + this.memberInfo.member_id
//        this.$router.push({name: 'news-detail', params: {id: id}})
//        this.$request.getNewsDetail(id).then(data => {
//          window.location.href = data.forward_url
//        }).catch(e => {
//          this.$toast('获取文章详情失败：' + e.msg)
//        })
      },
      getNewsList(page, pageSize) {
        this.newsList.loading = true
        this.$request.getNewsList(page, pageSize).then(data => {
          if (data.length < this.newsList.pageSize) {
            this.newsList.allLoaded = true
          }
          this.newsList.data = [...this.newsList.data, ...data]
        }).finally(() => {
          this.newsList.requested = true
          this.newsList.loading = false
        })
      },
      loadMore() {
        if (this.newsList.loading || this.newsList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getNewsList(++this.newsList.page, this.newsList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>